<template>
    <div class="table-pagination-warp">
        <el-pagination @size-change="pageSizesChange" @current-change="pageChange" :current-page=options.currentpage
                       :page-sizes=options.sizes :page-size=options.batch :layout=options.layout :total=options.total>
        </el-pagination>

    </div>
</template>
<script>
    export default {
        name: 'pagination',
        methods: {
            // 翻页回调
            pageChange(pageNum) {
                this.$emit('pageChange', pageNum);
            },
            // 每页记录条数改变回调
            pageSizesChange(size) {
                this.$emit('pageSizesChange', size);
            }
        },
        computed: {
            options() {
                return Object.assign({
                    total: 0,
                    batch: 20,
                    sizes: [20, 50, 100],
                    layout: 'total, sizes, prev, pager, next,jumper'
                }, this.pageOption);
            }
        },
        props: ['pageOption']
    };
</script>
<style lang="scss">
    .table-pagination-warp {
        padding: 10px 0;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>